<template>
  <el-container class="el-container">
    <el-header class="el-header">
      <div class="navbar">
        <div class="navbar-left">
          <img
            class="logo-img"
            src="/src/assets/images/1.png"
            width="380"
            @click="goPage"
          />
        </div>
        <div class="navbar-right">
          <div class="login-wrap">
            <span
              @click="showLoginForm = true"
              style="
                background-color: aquamarine;
                padding: 6px 10px;
                border-radius: 20px;
              "
              >Supplier Login</span
            >
            <span
              style="
                margin-left: 30px;
                background-color: aquamarine;
                padding: 6px 10px;
                border-radius: 20px;
              "
            >
              <a @click="goPage1">join us</a>
            </span>
          </div>
          <!-- <div class="navbar-list">
            <div class="navbar-list-item" v-for="(item, index) in navbarList" :key="index" @click="goPage(item.path)">{{
              item.label }}</div>
          </div> -->
        </div>
      </div>
    </el-header>
    <el-main>
      <router-view v-slot="{ Component }">
        <component :is="Component"></component>
      </router-view>
    </el-main>
    <!-- <el-footer class="el-footer">
      <div class="floor-card">
        <div class="floor-card-item">
          <div class="card-left">
            <img src="/src/assets/images/login_contact1.png" />
          </div>
          <div class="card-right">
            <span @click="handleShowDialog(1)">Privacy Policy</span> |
            <span @click="handleShowDialog(2)">Terms & Conditions</span> |
            <span @click="goPage('help')">Help Center </span>
            <br />
            <span @click="goPage('notSell')">Do Not Sell My Personal Information</span> |
            <span @click="goPage('aboutus')">About Us</span>
          </div>
        </div>
        <div class="floor-card-item">
          <div class="card-left">
            <img src="/src/assets/images/login_contact2.png" />
          </div>
          <div class="card-right">
            <p>Contact Us <strong>business@tidfsurvey.com</strong></p>
            <p>Our dedicated support team is here for you.</p>
          </div>
        </div>
        <div class="floor-card-item">
          <div class="card-left">
            <img src="/src/assets/images/login_contact3.png" />
          </div>
          <div class="card-right">
            <p>+<strong>44 7536 197569</strong></p>
            <p>Our dedicated support team is here for you</p>
          </div>
        </div>
      </div>
    </el-footer> -->
    <Transition name="loginForm">
      <div class="login-form-wrap" v-show="showLoginForm">
        <div>
          <el-form
            ref="loginRef"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <div class="logn-form-close" @click="showLoginForm = false">
              <el-icon size="20" color="#FFFFFF">
                <Close />
              </el-icon>
            </div>
            <div class="title">
              <!-- <span class="back" @click="backHome"
            ><el-icon><Back /></el-icon
          ></span> -->
              <span>MHinsight</span>
            </div>

            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="Account number"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="user"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="cipher"
                @keyup.enter="handleLogin"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="password"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code" v-if="captchaEnabled">
              <el-input
                v-model="loginForm.code"
                size="large"
                auto-complete="off"
                placeholder="Verification code"
                style="width: 63%"
                @keyup.enter="handleLogin"
              >
                <template #prefix
                  ><svg-icon
                    icon-class="validCode"
                    class="el-input__icon input-icon"
                /></template>
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" class="login-code-img" />
              </div>
            </el-form-item>
            <el-checkbox
              v-model="loginForm.rememberMe"
              style="margin: 0px 0px 25px 0px"
              >Remember the password</el-checkbox
            >
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                size="large"
                type="primary"
                style="width: 100%"
                @click.prevent="handleLogin"
              >
                <span v-if="!loading">Log in</span>
                <span v-else>Be logging in</span>
              </el-button>
              <div style="float: right" v-if="register">
                <router-link class="link-type" :to="'/register'"
                  >Register now</router-link
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </Transition>
    <!-- <div class="footer">
      <div class="footerBanxin">
        <div class="mg">
          Address of China office ：No.403, Building A, Qiaofu Building, Haibei
          Construction Avenue, Huangqi, Dali Town, Nanhai District, Foshan City
        </div>
        <div class="mg">
          UK office address：SUITE 6320 61 BRIDGE STREET KINGTON
        </div>
        <div class="mg">Contact email：business@tidfsurvey.com</div>
        <div class="mg">Contact Information for UK Office：+44 7536 197569</div>
      </div>
    </div> -->
    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
      <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="Name" prop="menuName">
              <el-input
                v-model="form.menuName7"
                placeholder="Enter your name"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Gender" prop="menuName">
              <el-input
                v-model="form.menuName6"
                placeholder="Enter your Gender"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Age" prop="menuName">
              <el-input v-model="form.menuName5" placeholder="Enter your Age" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Country" prop="menuName">
              <el-input
                v-model="form.menuName4"
                placeholder="Enter your Country"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Career" prop="menuName">
              <el-input
                v-model="form.menuName3"
                placeholder="Enter your Career"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Email" prop="menuName">
              <el-input
                v-model="form.menuName2"
                placeholder="Enter your Email"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Phone Number" prop="menuName">
              <el-input
                v-model="form.menuName1"
                placeholder="Enter your Phone Number"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showDialog" width="80%" top="100vh">
      <PrivacyPolicy v-show="showDialogIndex === 1" />
      <Condition v-show="showDialogIndex === 2" />
    </el-dialog>
  </el-container>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user";
import { useRoute, useRouter } from "vue-router";
import PrivacyPolicy from "@/views/login/privacyPolicy";
import Condition from "@/views/login/condition";
const userStore = useUserStore();
const route = useRoute();
let title = ref("Join Us");
let open = ref(false);
const router = useRouter();
const { proxy } = getCurrentInstance();
let isShow = ref(false);
let form = reactive({
  menuName1: "",
  menuName2: "",
  menuName3: "",
  menuName4: "",
  menuName5: "",
  menuName6: "",
  menuName7: "",
});
const showLoginForm = ref(false); // 是否显示登录框
import image1 from "/src/assets/images/PG-Forsta-has-been-named-a-Leader-in-the-2024-Gartner-PR-V4.webp";
import image2 from "/src/assets/images/Cint-PR-630x410.webp";
import image3 from "/src/assets/images/Forsta-x-HelloIgnite-Press-Release-FINAL_v3-630x410.webp";
import image4 from "/src/assets/images/MicrosoftTeams-image-32-630x410.webp";
import image5 from "/src/assets/images/SM-0042_Make-the-complex-simple_Forsta_blog_header-630x410.webp";
import image6 from "/src/assets/images/MicrosoftTeams-image-4-630x410.webp";
import image7 from "/src/assets/images/SM-0042_Into_The_Future_With_Forsta_blog_header-630x410.webp";
import image8 from "/src/assets/images/HX-630x410.webp";
import image9 from "/src/assets/images/eBay-1-630x410.webp";
const navbarList = [
  { label: "HOW IT WORKS", path: "howWork" },
  { label: "HELP CENTER", path: "help" },
];
const goPage1 = () => {
  open.value = true;
};
const showDialog = ref(false);
const showDialogIndex = ref(1);
let lbList = ref([
  {
    title: "News",
    content:
      "PG Forsta Named a Leader in the 2024 Gartner® Magic Quadrant™ for Voice of the Customer",
    url: image1,
  },
  {
    title: "News, Qualitative Research, Quantitative research",
    content:
      "Cint and Forsta form industry-first partnership to drive a reduction in survey fraud",
    url: image2,
  },
  {
    title: "Customer experience, News",
    content:
      "Forsta acquires crowdsourcing and innovation platform HelloIgnite",
    url: image3,
  },
  {
    title: "Customer experience, News",
    content:
      "Forsta and Rio SEO combine to provide technology solutions spanning the entire customer journey, from discovery to purchase to brand reputation & advocacy",
    url: image4,
  },
  {
    title: "Webinar",
    content: "Make the complex simple",
    url: image5,
  },
  {
    title: "News",
    content:
      "Press Ganey advances technology via acquisition of Forsta, a global leader in Market Research, Customer Experience and Employee Experience",
    url: image6,
  },
  {
    title: "Webinar",
    content: "Take your reporting into the future with Forsta",
    url: image7,
  },
  {
    title: "White paper",
    content: "Introducing the future of Experience & Research technology",
    url: image8,
  },
  {
    title: "Case study",
    content: "Giving eBay the human touch",
    url: image9,
  },
]);
/**
 * 点击搜索控制显示隐藏input
 */
const showInputSearch = () => {
  isShow.value = !isShow.value;
};
const goLogoin = () => {
  router.push("/login");
};
// onMounted(() => {
//   sessionStorage.setItem("isInPage", true);
// });
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: "",
});

const loginRules = {
  username: [
    {
      required: true,
      trigger: "blur",
      message: "Please enter your account number",
    },
  ],
  password: [
    { required: true, trigger: "blur", message: "Please enter your password" },
  ],
  code: [
    {
      required: true,
      trigger: "change",
      message: "Please enter the verification code",
    },
  ],
};

const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

watch(
  route,
  (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect;
  },
  { immediate: true }
);

function goPage(path) {
  window.open("/");
}

function handleShowDialog(index) {
  showDialogIndex.value = index;
  showDialog.value = true;
}

function handleLogin() {
  proxy.$refs.loginRef.validate((valid) => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), {
          expires: 30,
        });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          const query = route.query;
          const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
            if (cur !== "redirect") {
              acc[cur] = query[cur];
            }
            return acc;
          }, {});
          router.push({ path: redirect.value || "/", query: otherQueryParams });
        })
        .catch(() => {
          loading.value = false;
          // 重新获取验证码
          if (captchaEnabled.value) {
            getCode();
          }
        });
    }
  });
}

function getCode() {
  getCodeImg().then((res) => {
    captchaEnabled.value =
      res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password:
      password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  };
}

/***

- 返回首页
  */

// const backHome = () => {
//   router.push("/customPage");
// };
getCode();
getCookie();
</script>
<style lang="scss" scoped>
.loginForm-enter-active,
.loginForm-leave-active {
  transition: all 0.5s ease;
}

.loginForm-enter-from,
.loginForm-leave-to {
  opacity: 0;
  transform: translateX(50px);
}

.dialog :deep(.container) {
  margin: 0;
}

.el-container {
  position: relative;
  margin: 8px;

  .el-header {
    // position: fixed;
    overflow: hidden;
    height: 120px;
    border-radius: 5px;
    background-color: #fff;

    .navbar {
      display: flex;
      justify-content: space-between;
      max-width: 1500px;
      height: 100px;
      margin: 0 auto;

      .navbar-left {
        height: 100%;
        overflow: hidden;

        .logo-img {
          // height: 160px;
          cursor: pointer;
        }
      }

      .navbar-right {
        flex: 1;
        margin-top: 20px;

        .login-wrap {
          text-align: right;
          // color: #FFF;
          font-weight: 500;
          font-size: 20px;

          span {
            cursor: pointer;
          }
        }

        .navbar-list {
          display: flex;
          justify-content: flex-end;
          flex-wrap: nowrap;

          .navbar-list-item {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 25px;
            font-size: 15px;
            border: none;
            color: #fff;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

            &:hover {
              background-color: #0f6392;
            }
          }
        }
      }
    }
  }

  .el-main {
    padding: 0;
    background-color: #fff;
  }

  .el-footer {
    width: 85%;
    height: 60px;
    margin: 0 auto;

    .floor-card {
      display: flex;
      padding: 30px 0;

      .floor-card-item {
        display: flex;
        align-items: center;
        flex: 1;
        padding: 10px;

        &:first-child {
          color: #7bc27f;
        }

        .card-left {
          img {
            height: 45px;
          }
        }

        .card-right {
          margin-left: 20px;

          span {
            line-height: 8px;
            cursor: pointer;
            font-size: 14px;

            &:hover {
              color: #f76c6c;
            }
          }

          p {
            font-size: 14px;
            margin: 0;
          }
        }
      }
    }
  }

  .login-form-wrap {
    position: absolute;
    top: 125px;
    right: 2px;

    .logn-form-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }

    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
      align-items: center;
      position: relative;
    }

    .login-form {
      border-radius: 6px;
      background-color: rgba(0, 0, 0, 0.5);
      /* 半透明黑色背景 */
      width: 300px;
      height: 370px;
      padding: 25px 25px 5px 25px;

      .el-input {
        height: 40px;

        input {
          height: 40px;
        }
      }

      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
      }
    }

    .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }

    .login-code {
      width: 33%;
      height: 40px;
      float: right;

      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }

    .el-login-footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }

    .login-code-img {
      height: 40px;
      padding-left: 12px;
    }
  }
}

.navButtonWD {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navButtonWD1 {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navButtonWD:hover {
  color: blueviolet;
}

.navButtonWD1:hover {
  color: blueviolet;
}

.content-header {
  width: 100%;
  background-image: url("/src/assets/images/login-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;

  .content-header-banxin {
    width: 80%;
    margin: 0 auto;
    height: 920px;

    .content-header-banxin-navbar {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .content-header-banxin-navbar-logo {
        flex: 10%;
        height: 80px;
        background-image: url("../../assets//logo/logo.png");
        background-position: bottom;
        background-repeat: no-repeat;
      }

      .content-header-banxin-navbar-list {
        flex: 80%;
        height: 80px;
        background-color: aqua;
      }

      .content-header-banxin-navbar-button {
        flex: 10%;
        height: 80px;
        background-color: slategray;
      }
    }

    .content-header-body {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 128px;
      font-weight: bold;
      height: 840px;
      width: 100%;
    }
  }
}

.content-banxin {
  width: 80%;
  height: 100px;
  margin: 0 auto;
}

.content-bodyTwo {
  width: 100%;
  background-color: #d2ffff;

  .content-bodyTwo-banxin {
    width: 80%;
    height: 700px;
    margin: 0 auto;

    .content-bodyTwo-banxin-top {
      height: 300px;
      padding-top: 40px;
      box-sizing: border-box;
    }

    .content-bodyTwo-banxin-bottom {
      display: flex;
      gap: 20px;

      .content-bodyTwo-banxin-bottom-left {
        flex: 50%;
      }

      .content-bodyTwo-banxin-bottom-right {
        flex: 50%;
      }
    }
  }
}

.content-bodyThree {
  width: 100%;
  background-color: #004d63;

  .content-bodyThree-banxin {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    display: flex;

    .content-bodyThree-banxin-left {
      padding-top: 40px;
      box-sizing: border-box;
      flex: 50%;
    }

    .content-bodyThree-banxin-right {
      flex: 50%;
      padding: 20px;
      box-sizing: border-box;

      .bgimg {
        width: 100%;
        height: 100%;
        background-image: url("../../assets//images//PINK-CHEV-1-1.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.lbButton {
  margin-top: 20px;
  transition: 0.5s;

  &:hover {
    transform: translateX(20px);
    color: blueviolet;
  }
}

.itemText:hover {
  color: blueviolet;
}

.footer {
  width: 100%;
  background-color: #f9f9f9;

  .footerBanxin {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
  }
}

.mg {
  margin: 20px 0;
  font-size: 18px;
}
</style>
